<template>
	<view class="container" :style="{paddingBottom:!Authorization ? '100rpx':''}">
		<!-- 首页单独自定义导航 -->
		<view class="nav-wrap" id='nav-wrap' :style="{height:fixedNavHeight+'px'}">
			<view class="nav-main" :style="{height:fixedNavHeight+'px'}">
				<view class="nav-inner"
					:style="{background:background,backgroundSize:bgSize,paddingTop:statusBarHeight+'px'}">
					<view class="head-inner">
						<view class='head-con'>
							<text class="sub-t">正品保障 好物不断</text>
						</view>
					</view>
					<view class="search-wrap line-center" @tap='toSearchPage' id='search-wrap'>
						<view class="search-main line-v-center">
							<view class="search-icon">
								<uni-icons type="search" color="#999" size="20"></uni-icons>
							</view>
							<view class="search-con">万千商品，等你来采购</view>
							<view class="btn line-center">搜索</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="linear-bg">
			<!-- <image :src='hostUrl+"/static/images/home-single-bg.png"'></image> -->
			<image src='/static/home-single-bg.png'></image>
		</view>
		<view class="wrap" id='wrap' :style="{paddingBottom:safeAreaBottom+'px'}">
			<div class="mr">
				<!-- 轮播展示 -->
				<view class="swiper-wrap">
					<swiper class="swiper-con" autoplay='true' interval='6000' circular="true" :current='swiperIndex'
						@change="swipeBanner">
						<swiper-item v-for='(item,index) in swiperList' :key="index" @tap='toSwiperPage(item)'>
							<view class="img">
								<base-img :src='item.image'></base-img>
							</view>
						</swiper-item>
					</swiper>
					<swiper-dots :list='swiperList' :activeIndex='swiperIndex'
						v-if='swiperList.length > 1'></swiper-dots>
				</view>
				<!-- 分类 -->
				<view class="cate-wrap">
					<view class="cate-main">
						<view class="cate-item" v-for='(item,index) in cateList' :key="index">
							<view class="cate-item-con" @tap='toCatePage(index,item.category_id)'>
								<view class="cate-icon">
									<base-img :src='item.image'></base-img>
								</view>
								<view class="cate-text">{{item.name}}</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 广告 -->
				<view class="adv-wrap">
					<view class="adv-swiper">
						<swiper autoplay='true' interval='6000' circular="true" :current='advSwiperIndex'
							@change="swipeAdv">
							<swiper-item v-for='(item,index) in advSwiperList' :key="index" @tap='toGoodsDetail(item.goods_id)'>
								<view class="img">
									<base-img :src='item.image'></base-img>
								</view>
							</swiper-item>
						</swiper>
						<swiper-dots :list='advSwiperList' :activeIndex='advSwiperIndex'
							v-if='advSwiperList.length > 1'></swiper-dots>
					</view>
					<view class="right-goods-wrap" v-if='advGoods.length > 0'>
						<view class="right-goods-wrap-item">
							<base-img :src='advGoods[0].backgroud_img'></base-img>
							<view class="item-con">
								<view class="title">{{advGoods[0].name}}</view>
								<view class="goods-con">
									<view class="goods-item" v-for="(goodsItem,goodsIndex) in advGoods[0].goodlist"
										@tap='toGoodsDetail(goodsItem.goods_id)'>
										<view class="goods-img">
											<base-img :src='goodsItem.goods_image'></base-img>
										</view>
										<view class="goods-price">
											<image src='/static/price-bg.png'></image>
											<view class="goods-price-text">￥{{goodsItem.goods_price_min}}</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="right-goods-wrap-item">
							<base-img :src='advGoods[1].backgroud_img'></base-img>
							<view class="item-con">
								<view class="title">{{advGoods[1].name}}</view>
								<view class="goods-con">
									<view class="goods-item" v-for="(goodsItem,goodsIndex) in advGoods[1].goodlist"
										@tap='toGoodsDetail(goodsItem.goods_id)'>
										<view class="goods-img">
											<base-img :src='goodsItem.goods_image'></base-img>
										</view>
										<view class="goods-price">
											<image src='/static/price-bg.png'></image>
											<view class="goods-price-text">￥{{goodsItem.goods_price_min}}</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="right-goods-wrap" v-else>
						<view class="right-goods-wrap-item" v-for='(item,index) in 2' :key="index"></view>
					</view>
				</view>
			</div>
			<!-- 推荐 -->
			<view class="tui-wrap">
				<view class="tui-item-wrap" v-for='(item,index) in recommandList' :key="index">
					<image :src='item.backgroud_img'></image>
					<view class="tui-item-con">
						<view class="title-wrap line-v-center">
							<view class="title">·{{item.name}}·</view>
							<view class="more" @tap='toMoreGoodsList(item.id,item.name)'>
								查看更多<uni-icons type='forward' color="#999999" size="12"></uni-icons>
							</view>
						</view>
						<view class="tui-goods">
							<view class="tui-goods-item" v-for="(goodsItem,goodsIndex) in item.goodlist"
								@tap='toGoodsDetail(goodsItem.goods_id)' :key="goodsIndex">
								<small-goods-item :item='goodsItem' @addCart='addCart' ref='goodsItem'
									:Authorization='Authorization'></small-goods-item>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部登录条 -->
		<view class="login-strip-wrap" v-if='!Authorization' @tap='toLogin'>
			<view class="text">马上登录享受更多专属服务</view>
			<view class="btn line-center">登录</view>
			<view class="close">
				<image src='/static/strip-close.png'></image>
				<view class="close-icon">
					<uni-icons type='closeempty' size="12" color="#fff"></uni-icons>
				</view>
			</view>
		</view>
		<!-- 优惠券弹窗 -->
		<view class="poster-modal" :class="[showModal ? 'modal-show':'']"></view>
		<view v-if='showCouponModal'>
			<new-gift :zoomCouponClass='zoomCouponClass' :couponInfo='couponInfo' @closeCouponModal='closeCouponModal'></new-gift>
		</view>
		<view class="poster-modal-wrap animated" :class="zoomPosterClass" v-if='showPosterModal'>
			<view class="modal-post-img" @tap='toGoodsDetail(randomPosterId,1)'>
				<base-img :src='randomPoster'></base-img>
			</view>
			<view class="close" @tap='closePosterModal'>
				<uni-icons type='close' color="#fff" size="30"></uni-icons>
			</view>
		</view>
		<!-- sku弹窗 -->
		<sku-modal :skuMode='1' :goodsShowPos='0' v-model="showSkuPopup" :goods="goodsDetail"
			ref='skuModal'></sku-modal>
	</view>
</template>

<script>
	const app = getApp();
	let options;
	import smallGoodsItem from '@/components/small-goods-item/small-goods-item.vue';
	import swiperDots from '@/components/swiper-dots/swiper-dots.vue';
	import skuModal from '@/components/sku-modal/sku-modal.vue';
	import goodsItem from '../../../components/goods-item/goods-item.vue';
	import newGift from '../../../components/new-gift/new-gift.vue';
	export default {
		components: {
			smallGoodsItem,
			swiperDots,
			skuModal,
			goodsItem,
			newGift
		},
		data() {
			return {
				siteName: '',
				headAllHeight: app.globalData.headAllHeight,
				statusBarHeight: app.globalData.statusBarHeight,
				fixedNavHeight: app.globalData.headAllHeight + 56,
				background: `url(${app.globalData.hostUrl}/static/images/home-single-bg.png)`,
				bgSize: '100% 578rpx',
				hostUrl: app.globalData.hostUrl,
				swiperIndex: 0,
				swiperList: [],
				cateList: [{
					image: '/static/quickly-buy.png',
					category_id: '-1',
					name: '快速购买'
				}, {
					image: '/static/coupon.png',
					category_id: '-3',
					name: '领券中心'
				}, {
					image: '/static/more.png',
					category_id: '-2',
					name: '更多分类'
				}],
				randomPoster: '',
				showPosterModal: false,
				zoomPosterClass: 'zoomIn',
				randomPosterId: '',
				advSwiperIndex: 0,
				advSwiperList: [],
				advGoods: [],
				recommandList: [],
				pagePadding: app.globalData.pagePadding,
				showModal: false,
				safeAreaBottom: app.globalData.safeAreaBottom,
				showSkuPopup: false,
				goodsDetail: {},
				Authorization: '',
				uid:'',
				couponInfo: {},
				showCouponModal: false,
				zoomCouponClass: 'zoomIn',
			};
		},
		onLoad(option) {
			options = option;
			
		},
		onShow() {
			this.Authorization = uni.getStorageSync('TOKEN') ? uni.getStorageSync('TOKEN') : "";
			this.uid = uni.getStorageSync('UID') ? uni.getStorageSync('UID') : "";
			console.log('this.uid',this.uid)
			if (options.scene) {
				console.log('分享海报进来=======',options.scene)
				app.globalData.shareUid = options.scene
			} else {
				console.log('分享链接进来 === 》', options)
				if (options.uid) app.globalData.shareUid = options.uid
			}
			console.log('app.globalData.shareUid',app.globalData.shareUid)
			this.getIndexHeader();
			this.getRecommand();
			this.getRandomPoster();
			this.getNewGift();
		},
		onPullDownRefresh() {
			this.reloadPage();
			uni.stopPullDownRefresh()
		},
		onShareAppMessage(res) {
			let path, title, imageUrl;
			path = `/pages/tab-page/index/index?uid=${this.uid}`;
			title = '首页';
			imageUrl = '';
			console.log('path',path)
			return {
				path,
				title,
				imageUrl
			}
		},
		onShareTimeline() {
			return {
				title: '食通态鲜',
				query: `uid=${this.uid}`
			};
		},
		onHide() {
			console.log('onHide')
			// app.globalData.isClose = 0;
			// this.showModal = false
			// this.showPosterModal = false
		},
		onUnload() {
			console.log('onUnload')
		},
		methods: {
			/* 
			 *顶部逻辑
			 * toSearchPage() 跳转搜索页面
			 * getRandomPoster() 获取随机海报
			 * getIndexHeader() 获取轮播与分类数据
			 * swipeBanner() 轮播touch事件
			 * toSwiperPage() 轮播跳转页面事件
			 * toCatePage() 跳转分类页面
			 * addCart() 弹出商品SKU弹窗
			 * getNewGift() 获取新人礼
			 */
			reloadPage() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				this.getIndexHeader();
				this.getRecommand();
				uni.hideLoading()
			},
			getRandomPoster() {
				app.globalRequest({
					api: app.getApi().home.randomPoster,
				}).then(res => {
					if (res.code == 0) {
						if (res.data) {
							this.randomPoster = res.data.image;
							this.randomPosterId = res.data.goods_id;
							if (app.globalData.isClose == 1) {
								this.showModal = false;
								this.showPosterModal = false;
								this.zoomPosterClass = 'zoomOut'
							} else {
								this.showModal = true;
								this.showPosterModal = true;
								this.zoomPosterClass = 'zoomIn';
								app.globalData.isClose == 1
							}
						}
					}
				})
			},
			getNewGift() {
				app.globalRequest({
					api: app.getApi().home.getNewGift,
				}).then(res => {
					if (res.code == 0) {
						if (res.data.giftStatus == 1) {
							this.couponInfo = res.data.couponInfo;
							this.showModal = true;
							this.showCouponModal = true;
							this.zoomCouponClass = 'zoomIn'
						}else{
							// console.log('弹出商品海报')
							// this.getRandomPoster()
						}
					}else{
						// console.log('弹出商品海报')
						// this.getRandomPoster()
					}
				})
			},
			getIndexHeader() {
				let that = this;
				app.globalRequest({
					api: app.getApi().home.indexHeader
				}).then(res => {
					uni.hideLoading()
					if (res.code == 0) {
						that.siteName = res.data.siteName;
						that.swiperList = res.data.sliderData;
						console.log('swiperList', that.swiperList)
						res.data.cateData.unshift({
							image: '/static/quickly-buy.png',
							category_id: '-1',
							name: '快速购买'
						}, {
							image: '/static/coupon.png',
							category_id: '-3',
							name: '领券中心'
						})
						res.data.cateData.push({
							image: '/static/more.png',
							category_id: '-2',
							name: '更多分类'
						})
						that.cateList = res.data.cateData
					}
				})
			},
			toSearchPage() {
				uni.navigateTo({
					url: '/pages/goods-page/search/search'
				})
			},
			swipeBanner(e) {
				if (e.detail.source == "touch" || e.detail.source == "autoplay") {
					this.swiperIndex = e.detail.current
				}
			},
			toSwiperPage(item) {
				let path;
				switch (Number(item.type)) {
					case 1:
						if (!item.content) {
							return;
						}
						path = `/pages/goods-page/goods-detail/goods-detail?goods_id=${item.content}`;
						break;
					case 2:
						path = `/pages/goods-page/activity-detail/activity-detail?id=${item.id}&title=${item.title}`;
				}
				uni.navigateTo({
					url: path
				})
			},
			toCatePage(index, id) {
				app.globalData.firstCateIndex = index;
				let cateList = this.cateList;
				if (id == '-1') {
					uni.navigateTo({
						url: '/pages/goods-page/goods-list-more/goods-list-more?type=2'
					})
				} else if (id == '-2') {
					uni.switchTab({
						url: '/pages/tab-page/category/category'
					})
				} else if (id == '-3') {
					if (!this.Authorization) {
						this.toLogin()
						return;
					}
					uni.navigateTo({
						url: '/pages/coupon-page/coupon/coupon'
					})
				} else {
					uni.navigateTo({
						url: `/pages/goods-page/category/category?id=${id}`
					})
				}
			},
			/* 
			 *推荐商品部分
			 * getRecommand() 获取推荐商品
			 * swipeAdv() swiper touch事件
			 * toMoreGoodsList() 跳转更多商品列表
			 * toGoodsDetail() 跳转商品详情页
			 */
			getRecommand() {
				let that = this;
				app.globalRequest({
					api: app.getApi().home.recommand
				}).then(res => {
					if (res.code == 0) {
						that.advSwiperList = res.data.indexPoster;
						const indexRecommend = res.data.indexRecommend;
						const indexRecommendCopy = Array.from(indexRecommend);
						that.advGoods = res.data.indexRecommend.slice(0, 2);
						that.recommandList = indexRecommendCopy.splice(2);
					}
				})
			},
			swipeAdv(e) {
				if (e.detail.source == "touch" || e.detail.source == "autoplay") {
					this.advSwiperIndex = e.detail.current
				}
			},
			toMoreGoodsList(id, name) {
				uni.navigateTo({
					url: `/pages/goods-page/goods-list-more/goods-list-more?id=${id}&name=${name}`
				})
			},
			toGoodsDetail(id, type) {
				if (id == 0) {
					return;
				}
				uni.navigateTo({
					url: `/pages/goods-page/goods-detail/goods-detail?goods_id=${id}`
				})
				if (type == 1) {
					this.close()
				}
			},
			addCart(obj) {
				this.goodsDetail = obj;
				this.$refs.skuModal.toShowSkuPopup()
			},
			closePosterModal() {
				this.zoomPosterClass = 'zoomOut';
				setTimeout(() => {
					this.showModal = false;
					this.showPosterModal = false
					// uni.setStorageSync('IS-MP-CLOSE', '1')
					app.globalData.isClose = 1
				}, 200)
			},
			closeCouponModal() {
				app.globalRequest({
					api: app.getApi().coupon.userSaveCoupon,
					method: 'POST',
					data: {
						coupon_id: this.couponInfo.coupon_id
					}
				}).then(res => {
					if (res.code == 0) {
						this.zoomCouponClass = 'zoomOut';
						setTimeout(() => {
							this.showModal = false;
							this.showCouponModal = false;
						}, 200)
						// this.getRandomPoster();
					} else {
						this.zoomCouponClass = 'zoomOut';
						setTimeout(() => {
							this.showModal = false;
							this.showCouponModal = false;
						}, 200)
						// this.getRandomPoster();
					}
				})
			},
			toLogin() {
				uni.navigateTo({
					url: '/pages/login-page/login/login'
				})
			}
		}

	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;

	}

	.nav-wrap {
		width: 100%;
	}

	.nav-main {
		width: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 30;
	}

	.head-inner {
		width: 100%;
		height: 44px;
	}

	.head-con {
		width: 100%;
		height: 44px;
		position: relative;
		z-index: 3;
		height: 100%;
		padding-left: 24rpx;
		font-family: YouSheBiaoTiHei;
		display: flex;
		align-items: center;

		text {
			color: #fff;
			font-size: 24rpx;
		}

		.title {
			font-size: 48rpx;
		}

		.line {
			padding: 8rpx 10rpx 0;
			font-family: normal;
		}

		.sub-t {
			padding-top: 12rpx;
		}
	}

	.linear-bg {
		width: 100%;
		// height: 578rpx;
		height: 1006rpx;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 2;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.home-nav-wrap {
		height: 100%;
		padding-left: 24rpx;
		font-family: YouSheBiaoTiHei;
		display: flex;
		align-items: center;

		text {
			color: #fff;
			font-size: 24rpx;
		}

		.title {
			font-size: 48rpx;
		}

		.line {
			padding: 8rpx 10rpx 0;
			font-family: normal;
		}

		.sub-t {
			padding-top: 12rpx;
		}

	}

	.search-wrap {
		width: 100%;
		height: 56px;
		position: relative;
		z-index: 22;
	}

	.search-wrap-bg {
		background: $supplier-main-color;
	}

	.search-main {
		width: 690rpx;
		height: 72rpx;
		padding: 0 4rpx 0 28rpx;
		border-radius: $supplier-border-radius;
		background: #fff;
		margin: auto;
		display: flex;
		justify-content: space-between;

		.search-con {
			flex: 1;
			color: #CCCCCC;
			padding-left: 10rpx;
		}

		.btn {
			width: 146rpx;
			height: 64rpx;
			background: $supplier-sub-color;
			color: #fff;
			border-radius: $supplier-border-radius;
		}
	}

	.wrap {
		position: relative;
		z-index: 3;
		padding-bottom: 30rpx;
		// padding-bottom: var(--padding-bottom);
	}

	.main {
		width: 100%;
	}

	.mr {
		margin: 0 24rpx;
	}

	.swiper-wrap {
		width: 100%;
		height: 394rpx;
		border-radius: 24rpx;
		overflow: hidden;
		transform: translateY(0);
		margin-top: 20rpx;
		position: relative;
		// box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.06);
		background: #fff;

		.swiper-con {
			width: 100%;
			height: 100%;

			swiper-item,
			.img {
				width: 100%;
				height: 100%;
			}
		}
	}

	.cate-wrap {
		width: 100%;
		padding: 26rpx 0 0;
		box-sizing: border-box;
		background: #FFFFFF;
		// box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.06);
		border-radius: 24rpx;
		margin-top: 30rpx;

		.cate-main {
			margin-left: -6rpx;
			margin-right: -6rpx;
			box-sizing: border-box;

			&::after {
				content: '';
				display: block;
				clear: both
			}

			&::before {
				content: '';
				display: block;
				clear: both
			}
		}

		.cate-item {
			width: 20%;
			padding-right: 6rpx;
			padding-left: 6rpx;
			box-sizing: border-box;
			float: left;
			position: relative;
			margin-bottom: 26rpx;

			.cate-item-con {
				padding: 6rpx;
			}

			.cate-icon {
				width: 84rpx;
				height: 84rpx;
				margin: auto;
				background: $supplier-page-color;
				border-radius: 100%;
				overflow: hidden;
			}

			.cate-text {
				width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				padding-top: 14rpx;
				font-size: 24rpx;
				text-align: center;
			}
		}
	}

	.adv-wrap {
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
	}

	.adv-swiper {
		width: 344rpx;
		height: 496rpx;
		border-radius: 10rpx;
		overflow: hidden;
		transform: translateY(0);
		background: #FFFFFF;

		swiper,
		swiper-item,
		.img {
			width: 100%;
			height: 100%;
		}
	}

	.right-goods-wrap {
		width: 342rpx;
		height: 496rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.right-goods-wrap-item {
			width: 100%;
			height: 244rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			position: relative;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}

			.item-con {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 2;
				padding: 20rpx 8rpx 0;
				box-sizing: border-box;

				.title {
					font-size: 30rpx;
					padding-bottom: 14rpx;
				}
			}
		}

		.goods-con {
			// width: 326rpx;
			height: 164rpx;
			margin: auto;
			padding: 0 8rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 6rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.goods-item {
				width: 148rpx;
				height: 148rpx;
				position: relative;

				.goods-img {
					width: 148rpx;
					height: 148rpx;
					border-radius: 6rpx;
					overflow: hidden;
				}
			}

			.goods-price {
				width: 148rpx;
				height: 40rpx;
				position: absolute;
				left: 0;
				bottom: 0;
				z-index: 2;

				image {
					width: 100%;
					height: 100%;
				}

				.goods-price-text {
					width: 148rpx;
					height: 40rpx;
					position: absolute;
					left: 0;
					bottom: 0;
					color: #fff;
					font-size: 24rpx;
					line-height: 48rpx;
					text-align: center;
				}
			}
		}
	}

	.tui-item-wrap {
		width: 100%;
		height: 528rpx;
		margin-top: 20rpx;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		position: relative;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
		}

		.tui-item-con {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			box-sizing: border-box;
			padding: 26rpx 24rpx;
		}

		.title-wrap {
			justify-content: space-between;

			.title {
				font-size: 36rpx;
			}

			.more {
				font-size: 24rpx;
				color: #999;
				display: flex;
				align-items: center;
			}
		}

		.tui-goods {
			width: 702rpx;
			margin: 32rpx auto 0;
			display: grid;
			grid-template-columns: repeat(3, 226rpx);
			justify-content: space-between;
			gap: 8rpx;
		}
	}

	.login-strip-wrap {
		width: 100%;
		height: 72rpx;
		background: rgba(0, 0, 0, 0.45);
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 222;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 24rpx 0 38rpx;
		box-sizing: border-box;
		font-size: 24rpx;
		color: #fff;

		.btn {
			width: 132rpx;
			height: 48rpx;
			background: linear-gradient(138deg, #5BC450 0%, #53B349 100%);
			border-radius: 24rpx;
		}

		.close {
			position: absolute;
			left: 0;
			top: 0;
			width: 56rpx;
			height: 56rpx;

			image {
				width: 100%;
				height: 100%;
			}

			.close-icon {
				position: absolute;
				left: 2rpx;
				top: 2rpx;
				// padding-top:4rpx;
				// padding-left:4rpx;
			}
		}
	}


	.poster-modal {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.7);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1001;
		backdrop-filter: blur(10px);
		visibility: hidden;
		opacity: 0;
		transition: all 0.2s;
	}

	.modal-show {
		visibility: visible;
		opacity: 1;
	}


	.poster-modal-wrap {
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1002;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.modal-img {
			width: 524rpx;
			height: 666rpx;
			border-radius: 16rpx;
			overflow: hidden;
			position: relative;

			image {
				width: 100%;
				height: 100%;
			}

			.coupon-con {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;

				.title {
					font-weight: bold;
					font-size: 48rpx;
					color: #B44701;
					text-align: center;
					padding-top: 70rpx;
				}

				.tip {
					font-weight: bold;
					font-size: 32rpx;
					color: #B44701;
					text-align: center;
					padding-top: 42rpx;
				}

				.coupon-num {
					color: #FF0036;
					font-size: 100rpx;
					text-align: center;
					padding-top: 20rpx;

					text {
						font-size: 32rpx;
					}
				}

				/* 创建内阴影 */
				.inner-shadow {}

				.btn {
					width: 306rpx;
					height: 92rpx;
					background: linear-gradient(to right, #FFDCB6, #FFBD7B);
					box-shadow: inset 0 0 10px #FFDCB7;
					color: #B44701;
					font-size: 32rpx;
					font-weight: bold;
					border-radius: 46rpx;
					margin: 144rpx auto;
				}
			}
		}

		.modal-post-img {
			width: 688rpx;
			height: 992rpx;
			background: #fff;
			border-radius: 16rpx;
			overflow: hidden;
		}

		.close {
			width: 30px;
			height: 30px;
			margin: 20rpx auto 0;
		}
	}
</style>